<script setup>
import {Lock,  UserFilled} from "@element-plus/icons-vue";
import useUserStore from "@/store/modules/user.js";
const useStore = useUserStore();
const emit = defineEmits(['change'])

const loginForm = ref({
  username: 'hewu1122',
  password: 'admin888',
  checked: false
})

const loginRules = {
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
}

const loginFormRef = ref(null)
const doLogin = async () => {
  await loginFormRef.value.validate()
  useStore.login(loginForm.value).then(()=>{
    ElMessage.success('登录成功')
  })
}

</script>

<template>
  <el-card shadow="never" class="login-card">
    <div class="title">智慧云智能教育平台</div>
    <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" @keyup.enter.native="doLogin()" >
          <el-form-item prop="username">
            <el-input v-model="loginForm.username" clearable  placeholder="用户名" >
              <template #prefix>
                <el-icon >
                  <UserFilled />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="loginForm.password" clearable show-password type="password" placeholder="密码" >
              <template #prefix>
                <el-icon><Lock /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <div class="flex justify-between items-center w-full relative top-[-10px]">
            <el-checkbox v-model="loginForm.checked" style="margin-top: 7px">记住密码</el-checkbox>
            <span class="link relative top-[2px]" @click="emit('change','reset')">忘记密码?</span>
          </div>
          <el-form-item>
            <el-button class="login-btn"  @click="doLogin" type="primary">登录</el-button>
            <div class="flex justify-between w-full">
              <span class="link" @click="$router.push('/reg')">注册账号</span>
              <router-link  class="link" to="/">返回主页</router-link>
            </div>
          </el-form-item>
        </el-form>
  </el-card>
</template>

<style scoped lang="scss">
.login-card{
  width: 380px;
  min-height: 340px;
  padding: 30px 20px 0;
  position: fixed;
  top: 20%;
  left: 60%;
  .title{
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 30px;
    color: var(--el-color-primary);
  }
  .login-btn{
    width: 100%;
    margin-bottom: 10px;
  }
  .link{
    cursor: pointer;
    color: var(--el-color-primary);
    font-size: 14px;
  }
}
</style>
